<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title></title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=yes">
    <link rel="stylesheet" type="text/css" href="/css/pc/client/common.css">
    <!--[if lte IE 8]>
    <script src="/common/js/html5shiv.js"></script>
    <![endif]-->
    <script type="text/javascript">
        var _hmt = _hmt || [];
        (function () {
            var href = window.location.href;
            if (!href.match('test') && !href.match('mt')) {
                var hm = document.createElement("script");
                hm.src = "https://hm.baidu.com/hm.js?d6b1afd88bad903f6c136281ac832114";
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(hm, s);
            }
        })();
    </script>
    <link rel="stylesheet" type="text/css" href="/css/pc/client/personal.css">
    <link rel="stylesheet" type="text/css" href="/css/pc/client/userInfo.css">
    <style type="text/css">
        .form-wrap {
            min-height: 90px;
        }

        .form-wrap input {
            width: 300px;
            border: 1px solid #ddd;
            height: 35px;
            text-indent: 4px;
            border-radius: 3px;
        }

        .info-item {
            background-color: #f6f9f9;
        }

        .modify-btn {
            background-color: #3399cc;
            color: #fff;
            font-weight: bold;
            cursor: pointer;
        }

        .modify-btn:hover {
            background-color: #2288cc;
        }

        .pic-wrap {
            position: absolute;
            right: 606px;
            top: 30px;
            height: 35px;
        }

        .sms-button {
            top: 33px;
            right: 609px;
            height: 29px;
            line-height: 29px;
        }

        #main .con-title .col-tab-active a {
            color: #3399cc;
        }
    </style>
</head>
<body>
<input type="hidden" th:value="${session.username}" name="username" id="username">
<div class="header">
    <div class="nav-wrap">
        <div class="logo">
            <a rel="nofollow" href="#">
                <img src="/img/pc/client/home/logo.png" height="32" alt="租房网">
            </a>
        </div>
        <div class="city-wrap" style="cursor: default;">
            <span th:text="${cityName}"></span><i></i>
            <ul>
                    <span th:each="retAddress,status:${retAddressList}">
                        <span th:if="${retAddress.cityName} != ${cityName}">
                             <li><a rel="nofollow" th:href="@{/retPersonage/personage(id=${retAddress.id})}" th:text="${retAddress.cityName}"></a></li>
                        </span>
                    </span>
            </ul>
            <!-- <span>[<a rel="nofollow" href="https://www.zufun.cn/index" class="link" target="_blank">切换城市</a>]</span> -->
        </div>
        <div class="nav-items">
            <div class="nav-item">
                <a rel="nofollow" th:href="@{/retAddress/index}">首页</a>
            </div>

            <div class="nav-item">
                <a th:href="@{/retAddress/searchList}">租房</a>
            </div>

            <div class="nav-item">
                <a rel="nofollow" href="https://www.zufun.cn/platform" target="_blank">物业平台</a>
            </div>

            <div class="nav-item user-down-wrap" id="login_holder">
                <a href="#loginModal" rel="nofollow" data-toggle="modal" data-target="#loginModal">注册/登录</a>
            </div>
        </div>
    </div>
</div>
<div id="container">
    <div id="left_nav">
        <div class="per-info">
            <ul>
                <li class="per-active">
                    <a href="/retPersonage/personage">个人信息</a>
                </li>
                <li>
                    <a href="/retPersonage/message">
                        系统消息
                    </a>
                </li>
                <li>
                    <a href="/retPersonage/favorite">
                        我的收藏
                    </a>
                </li>
                <li>
                    <a href="/retPersonage/appointment">
                        预约管理
                    </a>
                </li>
                <li>
                    <a href="/retPersonage/apt/index">
                        出租房源
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div id="main">
        <div class="con-title">
            <ul class="con-tabs">
                <li class="con-tab">
                    <a href="/retPersonage/personage">个人信息</a>
                </li>
                <li class="con-tab col-tab-active">
                    <a href="/retPersonage/modifyPwd">设置密码</a>
                </li>
            </ul>
        </div>
        <form id="pswForm">
            <div class="info-item">
                <div class="form-wrap" style="position: relative;">输入手机号码<br/><input type="tel" class="not-post"
                                                                                    name="pic_code" id="pic_code"/>
                    <div class="pic-wrap"></div>
                </div>
                <div class="form-wrap" style="position: relative;">输入短信验证码<br/>
                    <input type="tel" class="not-post" name="vcode" id="vcode"/>
                    <span class="sms-button">获取验证码</span>

                </div>
                <div class="form-wrap">输入密码<br/><input type="password" name="password1" id="password1"/></div>
                <div class="form-wrap">再次输入密码<br/><input type="password" name="password2" id="password2"/></div>
                <div class="form-wrap ma-top"><input type="submit" class="modify-btn" value="确定"/></div>
            </div>
        </form>
    </div>
</div>
<!-- /buldings -->
<div style="clear:both"></div>
<div class="new-footer" style="margin-top:20px;">
    <div class="site-zufun">
        <div class="site-info">
            <p>
                <a rel="nofollow" href="https://www.zufun.cn/about" target="_blank">关于我们</a><span>|</span>
                <a rel="nofollow" href="https://www.zufun.cn/question" target="_blank">常见问题</a><span>|</span>
                <a rel="nofollow" href="https://www.zufun.cn/business" target="_blank">商务合作</a><span>|</span>
                <a rel="nofollow" href="https://www.zufun.cn/job" target="_blank">招聘信息</a><span>|</span>
                <a rel="nofollow" href="https://www.zufun.cn/protocol" target="_blank">服务声明</a><span>|</span>
                <a rel="nofollow" href="javascript:void(0);" onclick="suggest();">意见反馈</a><span>|</span>
                <a rel="nofollow" href="/sitemap" target="_blank">网站地图</a>
            </p>
            <div class="call-us">
                <div class="qrcode-wrap">
                    <span style="display: block;line-height: 1.3;white-space: nowrap;letter-spacing:2px;position: absolute;right:-30px;top: 17px;color:#999;">下载APP</span>
                    <i class="icon icon-mobile" style="position:relative;right:60px;"></i>
                    <i class="icon icon-app-qrcode qrcode" style="left:-102px;"></i>
                </div>
                <div class="qrcode-wrap">
                    <span style="display: block;line-height: 1.3;white-space: nowrap;letter-spacing:2px;position: absolute;left:30px;top: 17px;color:#999;">关注公众号</span>
                    <i class="icon icon-weixin"></i>
                    <i class="icon icon-weixin-qrcode qrcode"></i>
                </div>
            </div>
        </div>
        <div class="site-copyright" style="text-align:left;">
            <p>©2015-2020 深圳易找房信息技术有限公司&nbsp;&nbsp;版权所有&nbsp;&nbsp;
                <a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow">粤ICP备15073386号</a>
            </p>
            <span class="hotline" style="position: absolute;top: 30px;right: 0;font-size: 14px;">服务热线：132-6682-1881（9:00 - 18:00）</span>
        </div>
    </div>
</div>
<script id="suggest_tpl" type="text/html">
    <form id="suggest_form">
        <div class="form-group">
            <div class="textarea-group">
                <label>反馈内容</label>
                <textarea name="content" placeholder="欢迎提出您在使用过程中遇到的问题或宝贵建议，感谢您的支持。"></textarea>
            </div>
            <div class="input-group" style="height:100px;">
                <label>联系方式</label>
                <input type="text" name="email" placeholder="请留下您的手机或邮箱" style="margin-top:5px;" value="{{fu_mobile}}">
            </div>
            <div class="button-group">
                <input type="submit" value="提交反馈">
            </div>
        </div>
    </form>
</script>
<script src="/common/js/jquery-1.11.3.min.js"></script>
<script src="/libs/yzf/modules/yzf.tab.js"></script>
<script src="/libs/yzf/modules/yzf.modal.js"></script>
<script src="/libs/yzf/modules/yzf.button.js"></script>
<!--[if !IE]> -->
<script src="/js/pc/client/clientCommon.js"></script>
<!-- <![endif]-->
<!--[if gte IE 9]>
<script src="/js/pc/client/clientCommon.js"></script>
<![endif]-->
<!--[if lte IE 8]>
<script src="/common/js/jquery.cookie.js"></script>
<script src="/common/js/artForm.js"></script>
<script src="/common/js/md5.js"></script>
<script src="/common/js/base.js"></script>
<script src="/common/js/validateConfig.js"></script>
<script src="/common/js/jquery.validate.js"></script>
<script src="/js/pc/client/loginAndRegist2.js"></script>
<script src="/libs/artdialog/dist/dialog-min.js"></script>
<script src="/common/js/template.js"></script>
<script src="/common/js/jquery.lazyload.min.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<script src="/libs/JSON-js-master/json2.js"></script>
<![endif]-->
<!--[if lt IE 10]>
<script src="/common/js/normalize.js"></script>
<![endif]-->
<script th:src="@{/lib/layui/layui.js}"></script>
<script type="text/javascript">
    layui.use(["form", "okGVerify", "okUtils", "okLayer", "jquery"], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let okGVerify = layui.okGVerify;
        let okUtils = layui.okUtils;
        let okLayer = layui.okLayer;

        let regPhone = /^[1][0-9]{10}$/;


        $("#huoqu").click(function () {
            if (!regPhone.test($("#phone").val())) {
                layer.msg("输入的手机号格式不正确，请重新输入", {
                    time: 3000,
                    icon: 10
                });
            }
        })


        form.verify({
            fu_mobile: [
                regPhone,
                '输入的手机号格式不正确，请重新输入'
            ]
        });

        c();

        $("#pswForm").validate({
            rules: {
                password1: {
                    required: true,
                    minlength: 8,
                    maxlength: 16,
                    pwcheck: true
                },
                password2: {
                    required: true,
                    minlength: 8,
                    maxlength: 16,
                    equalTo: "#password1",
                    pwcheck: true
                },
                vcode: {
                    required: true
                }
            },
            messages: {
                password1: {
                    required: "请输入密码",
                    minlength: "密码长度不能小于8位",
                    maxlength: "密码长度不能大于16位",
                    pwcheck: "密码必须包含数字和字母"
                },
                password2: {
                    required: "请再次输入密码",
                    minlength: "密码长度不能小于8位",
                    maxlength: "密码长度不能大于16位",
                    equalTo: "两次输入的密码不一致",
                    pwcheck: "密码必须包含数字和字母"
                },
                vcode: {
                    required: "请输入短信验证码"
                }
            },
            submitHandler: function (e) {
                var data = {
                    "vcode": $(e).find('#vcode').val(),
                    "newpassword": md5($(e).find('#password1').val())
                };
                $.post(base.site_url('client/memMng/memInfo/changePwd'), data, function (ret) {
                    if (ret.code == 0) {
                        base.reload('修改成功');
                    } else {
                        base.alertMsg({
                            text: ret.message
                        })
                    }
                }, 'json');
            }
        });

        jQuery.validator.addMethod("pwcheck", function (value, element) {
            return /[0-9]/.test(value) && (/[a-z]/.test(value) || /[A-Z]/.test(value));
        }, "密码必须包含数字和字母");

        $(".pic-wrap").click(function () {
            var that = this;
            $.post(base.site_url('client/memMng/memLogin/rand_create'), null, function (ret) {
                if (ret.code == 0) {
                    if (ret.data) {
                        $(that).html(ret.data);
                    }
                } else {
                    base.alertMsg({
                        text: ret.message
                    })
                }
            }, 'json');
        });

        $.post(base.site_url('client/memMng/memLogin/rand_create'), null, function (ret) {
            if (ret.code == 0) {
                if (ret.data) {
                    $(".pic-wrap").html(ret.data);
                }
            } else {
                base.alertMsg({
                    text: ret.message
                })
            }
        }, 'json');
    });

    function c() {
        var user = $("#username").val();
        var t = $("#login_holder");
        user ? t.html('<div class="drop-wrap"><a href="/retPersonage/personage"><span class="icon_user"></span><span>' + user + '</span></a><ul class="arrow-top nav-down-wrap"><li><a href="/retPersonage/personage" target="_blank">个人中心</a></li><li><a href="/retAddress/logout" data-toggle="logout">退出登录</a></li></ul>') : t.html('<a href="#loginModal" rel="noffolow" data-toggle="modal" data-target="#loginModal">注册/登录</a>')
    }
</script>
</body>
</html>